<template>
  <div class="dialog-tree">
    <!-- 搜索 -->
    <el-input  v-model="searchName" placeholder="请输入分类名称" clearable size="small"
      prefix-icon="el-icon-search" style="margin-bottom:10px" />
    <!-- 新增主类 -->
    <div class="add-class" style="margin-bottom: 10px;" v-if="isOperation">
      <el-button type="primary" v-hasPermi="['inv:sort:add']" size="mini" @click="addParentSort" plain>新增主类</el-button>
    </div>
    <!-- 分类数据 -->
    <div class="height-tree10">
      <el-tree :data="sortTree" node-key="sortId" :props="defaultProps" :filter-node-method="filterNode" ref="tree"
        v-loading="loading" :highlight-current="isHeight" @node-click="nodeClick">
        <span class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%" @mouseenter="mouseenter(data)"
          @mouseleave="mouseleave(data)">
          <div class="chang-mourse">
            <span>{{ data.sortCode }}-{{ node.label }}</span>
            <span class="mou-r" v-if="isOperation">
              <el-link v-hasPermi="['inv:sort:add']" v-show="data.opShow" size="mini" type="primary" icon="el-icon-plus"
                @click.stop="addSort(node)">
              </el-link>
              <el-link v-hasPermi="['inv:sort:edit']" v-show="data.opShow" size="mini" style="color: #67c23a;"
                type="primary" icon="el-icon-edit" @click.stop="uplateSort(node)"></el-link>
              <el-link v-hasPermi="['inv:sort:remove']" v-show="data.opShow" size="mini" style="color: #f56c6c;"
                type="primary" icon="el-icon-delete" @click.stop="remove(node)"></el-link>
            </span>
          </div>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
  import {
    isSerial,
    supParent,
    selectNode,
    getCurrentNode,
    setCurrentNode,
  } from "../../utils/sort.js" //js方法
  export default {
    data() {
      return {
        //搜索分类名称
        searchName: "",
        // 上级分类名称
        parentName: "",
        //父分类id
        parentId: "",
        //上级分类是否显示
        isParentId: true,
        //element-ui表头样式
        activeName: 'basicinfo',
        //树形节点
        treeNode: "",
        //绑定树形数据名称
        defaultProps: {
          children: 'children',
          label: 'sortName',
        },
      }
    },
    props: {
      //遮罩层
      loading: {
        type: Boolean,
        default: true
      },
      // 是否显示操作按钮
      isOperation: {
        type: Boolean,
        default: true
      },

      // 是否高亮
      isHeight: {
        type: Boolean,
        default: false
      },

      // 分类数据
      sortTree: {
        type: Array,
        default () {
          return []
        }
      }
    },
    methods: {
      //新增主类
      addParentSort() {
        this.$emit("addParentSort")
      },
      //增加分类
      addSort(node) {
        this.$emit("addSort", node)
      },
      //修改分类
      uplateSort(node) {
        this.$emit("uplateSort", node);

      },
      // 移除分类
      remove(node) {
        this.$emit("remove", node)
      },
      //鼠标进入事件
      mouseenter(data) {
        this.$set(data, "opShow", true);
      },
      //鼠标离开事件
      mouseleave(data) {
        this.$set(data, "opShow", false);
      },
      // 树形筛选
      filterNode(value, data) {
        if (!value) return true;
        return data.sortName.indexOf(value) !== -1;
      },
      // 阻止点击默认
      nodeClick(node, data) {
        this.$emit("nodeClick", node, data)
      }
    },
    watch: {
      searchName(val) {
        this.$refs.tree.filter(val);
      }
    }

  }
</script>

<style lang="scss">
  .dialog-tree {
    .custom-tree-node {
      font-size: 14px;

      a {
        margin-left: 10px;

        &:hover i {
          font-weight: 700;

        }
      }

      .el-link.is-underline:hover:after {
        border: none !important;

      }
    }

    .chang-mourse {
      display: flex;
      justify-content: space-between;

      .mou-r {
        margin-right: 10px;
      }
    }

    .height-tree10 {
      max-height: calc(100vh - 160px);
      overflow: auto;
    }
  }
</style>
